<template>
	<div class="login-wrap">
    <div class="login-from">
      <div class="form-item">
        <input type="text" class="form-input" placeholder="手机号" v-model="phone">
      </div>
      <div class="form-item">
        <input type="password" class="form-input" placeholder="密码" autocomplete="new-password" v-model="password">
      </div>
      <button class="login-btn" @click="login">登录</button>
    </div>
	</div>
</template>

<script>
  export default {
    name: 'Login',
    data () {
      return {
        phone: '',
        password: ''
      }
    },
    methods: {
      async login () {
        try {
          let res = await this.$api.login(this.phone, this.password)
          if (res.code === 200) {
            this.loginRefresh()
          }
          // console.log(res)
        } catch (error) {
          console.log(error)
        }
      },
      async loginStatus () {
        try {
          let res = await this.$api.loginStatus()
          // if (res.code === 200) {
          //   console.log(res)
          // }
          console.log(res)
        } catch (error) {
          console.log(error)
        }
      },
      async loginRefresh () {
        try {
          let res = await this.$api.loginRefresh()
          if (res.code === 200) {
            this.loginStatus()
          }
          console.log(res)
        } catch (error) {
          console.log(error)
        }
      }
    },
    created () {
      this.loginStatus()
    }
  }
</script>

<style lang="stylus" scoped>
	.login-wrap {
    width: 100%;
    min-height: 100%;
    background: url('../../assets/images/bg.png') no-repeat;
    background-size: cover;
    background-attachment: fixed;
    padding: 1rem 0.3rem;
    .login-from {
      .form-item {
        width: 100%;
        height: 0.8rem;
        position: relative;
        margin-bottom: 0.3rem;
        &:after {
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0;
          content: '';
          box-sizing: border-box;
          height: 1px;
          border-bottom: 1px solid rgba(203, 203, 203, 1);
          transform: scaleY(0.1);
          transform-origin: 0 0;
        }
        .form-input {
          background: none;
          height: 0.8rem;
          line-height: 0.8rem;
          font-size: 0.28rem;
          color: #ffffff;
          resize: none;
        }
      }
    }
    .foot {
      width: 100%;
      padding: 0 0.6rem;
      position: absolute;
      left: 0;
      bottom: 1.4rem;
    }
    .login-btn {
      width: 100%;
      height: 0.8rem;
      line-height: 0.8rem;
      background: rgba(255, 91, 115, 0.5);
      border-radius: 1rem;
      color: rgba(255, 255, 255, 0.6);
      margin-top: 0.3rem;
      &.reg-btn {
        background: none;
        border: 1px solid #ff5b73;
      }
    }
	}
</style>
